上から落ちてきたあと振動するタイトル
今回は、前回の講座で紹介した「上から落ちてくるタイトル」を応用し、上から落ちてきたあと上下に震動するタイトル文字の作成方法を紹介します。タイトルはページ内で最も目立つ存在となるだけに、動きのある楽しいページを作成できると思いますよ。

→ タイトル用レイヤーの作成とJavaScript関数の呼び出し
 
タイトル文字を収めるレイヤーの作成、およびJavaScript関数「move()」の呼び出しは、前回の講座で解説した内容とまったく同じです。まずは、前回の講座を参考に、レイヤーの作成と関数「move()」の呼び出しを記述します。
<BODY onLoad="move()">

<DIV id="title" align="center" style="position:relative; top:-400px">
<TABLE height="300">
  <TR><TD>
    <FONT size="7" color="#FF0000">
    Let's Enjoy Homepage!!<BR>
    </FONT>
  </TD></TR>
</TABLE>
</DIV>


→ レイヤーを下に動かす
 
続いて、JavaScriptを利用してレイヤーを下に動かす処理を記述します。これも前回の講座と似ていますが、条件分岐の処理方法が異なっています。今回は、「flag」という変数を用意し、「flag」が0の場合は下に、「flag」が1の場合は上にレイヤーを動かします。よって、条件分岐のif文は「if(flag==0)」となります。また、レイヤーが本来表示されるべき位置（yy=0）きたら、「flag」の値を1に変更する処理「if(yy>0){flag=1}」を追加しておきます。これで、yyが0になるまでレイヤーが下に移動していきます。
<SCRIPT language="JavaScript">
<!--

var yy=-400;
var flag=0;

function move(){
  if(flag==0){
    yy=yy+1;
    document.getElementById('title').style.top=yy;
    if(yy>0){flag=1}
    setTimeout('move()',10)
  }
}

//-->
</SCRIPT>


→ レイヤーを上に動かす
 
続いて、「flag」が1の場合（「flag」が0でない場合）にレイヤーを上に動かす「else」処理を追加します。こちらの処理では、yyの値を減少させるようにし、yyが-50の位置に来たら「flag」の値を0に変更する処理「if(yy<-50){flag=0}」を追加します。これで、yyが50になるまでレイヤーが上に移動します。以降は「flag」が0の処理、すなわちレイヤーを下に動かす処理が実行され、yyが0に来たら再びレイヤーを上に動かす「else」処理に戻ります。以上を繰り返すことにより、タイトルは上下に振動するようになります。
<SCRIPT language="JavaScript">
<!--

var yy=-400;
var flag=0;

function move(){
  if(flag==0){
    yy=yy+1;
    document.getElementById('title').style.top=yy;
    if(yy>0){flag=1}
    setTimeout('move()',10)
  }
  else{
    yy=yy-1;
    document.getElementById('title').style.top=yy;
    if(yy<-50){flag=0}
    setTimeout('move()',10)
  }
}

//-->
</SCRIPT>


�e�����[�N����EC�i�r Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I
�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q�����@�C�O���s�����������I �C�O�z�e��